*{
	margin: 0;
	padding: 0;
}

/*身体*/
body{
	
	background: linear-gradient(120deg,#572d5b,#574088 100%);
}
.zhuti{
	height: 100vh;
	/*这是给网页一个弹性布局*/
	display: flex;/*flex*/
	/*居中对齐*/
	justify-content: center;
	/*居中对齐到一条线上*/
	align-items: center;
	/*添加背景颜色*/
	background: linear-gradient(120deg,#572d5b,#574088 100%);
}
.card{
	position: relative;
	height: 400px;
	width: 300px;
	margin: 20px;
	border-radius: 20px;
	background: linear-gradient(120deg,#b5abd6,#add6be,#abbbd6 100%);
	/*防溢出*/
	overflow: hidden;
	/*弹性布局*/
	display: flex;
	/*元素纵向排列*/
	flex-direction: column;
	/*中点对齐（所有图片在同一线上）*/
	align-items: center;
	/*防止图片被挤压*/
	flex-shrink: 0;
}
.card .photo img{
	width: 100%;
	height: 100%;
	/*如果图片太大就进行剪裁，保留原始尺寸*/
	object-fit: cover;
}

.card .photo{
	position: absolute;
	top: 100px;
	width: 100%;
	height: 100%;
	border-radius: 0%;
	/*防溢出*/
	overflow: hidden;
	/*动画过渡*/
	transition: 1s;
}

.card:hover .photo{
	top: 1000px;
}